<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <script>
      // 优势：功能更加丰富，很多实用的功能都已经提供出来了，不需要我们再封装了。同时还有很多高级的功能，比如：拦截请求和响应。在node环境和浏览器环境都能使用。
      // fetch：支持最基本的ajax请求发送，功能单一，需要自己封装。
      // jquery：它的侧重点在于操作DOM更便捷，发送ajax是附带功能，文件体积比较大，没有axios文件轻量。

      // 发送请求提供两种方式：通用方式和独立方式。

      // 您可以指定全局默认配置，它将作用于每个请求。
      // baseURL: 设置axios发送请求时的基础路径，也就是公共的部分，axios会将这个baseURL和请求的url拼接成一个完整的url再发送请求。
      axios.defaults.baseURL = "https://apif.java.crmeb.net/api/front";

      // .get(url，配置项)
      axios
        .get("/coupons", {
          headers: {
            "X-Requested-With": "XMLHttpRequest",
          },
          // `params` 是与请求一起发送的 URL 查询字符串参数
          params: {
            // 对于GET请求，携带查询字符串，除了可以使用?拼接在url的后面，还可以使用params属性设置参数。axios会自动将params对象的内容拼接在url的后面。注意：POST/PUT/DELETE如果要携带请求体参数使用data属性。
            a: 100,
            b: 200,
          },
          // `data` 是作为请求体(POST/PUT参数通常会放在请求体中)被发送的数据
          data: {},
        })
        .then(({ data }) => {
          console.log("优惠券: ", data);
        });
      axios.get("/index?b=200").then(({ data }) => {
        console.log("分类: ", data);
      });

      // 发送POST请求
      // .post(url, 请求体数据, 配置项)
      axios
        .post(
          "/index",
          {
            firstName: "Fred",
            lastName: "Flintstone",
          },
          {
            headers: {},
          }
        )
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });

      // 在使用独立方法（post等）时， url、method、data 这些属性都不必在配置中指定了。

      // 通用请求: axios(配置项);
      axios({
        url: "/index",
        method: "post",
        params: {
          // 查询字符串?参数
          a: 100,
          b: 200,
        },
        data: {
          // 请求体参数
          uname: "小明",
          upwd: "123",
        },
        headers: {},
      }).then((data) => {
        console.log(data);
      });

      // 总结：
      // 查询字符串参数：参数的值会直接暴漏在url的上面，不太安全。GET/DELETE请求，参数一般放在url后面。参数不重要，暴漏在url上无所谓。
      // 请求体参数：参数值不会暴漏在url上，相对安全一些。POST/PUT请求，参数一般放请求体中。参数一般比较重要，
      // 两者只是设置参数的位置不一样，功能都是一样的，目的都是一样的，都是为了给服务器传递参数。
    </script>
  </body>
</html>
